<template>
	<div class="login-container">
		<!-- 左侧内容区域 -->
		<div class="login-left">
			<div class="left-content">
				<div class="logo-wrap">
					<img src="@/assets/images/login/login-top.png" alt="Logo" class="logo" />
					<h2>特创易设计平台2.0</h2>
				</div>
				<div class="info-list">
					<div class="info-item">
						<CheckCircleOutlined />
						<span>已为3351个客户成功品牌设计</span>
					</div>
					<div class="info-item">
						<CheckCircleOutlined />
						<span>99.95%的客户给出好评</span>
					</div>
					<div class="info-item">
						<CheckCircleOutlined />
						<span>55786位认证创意人</span>
					</div>
				</div>
				<div class="illustration">
					<img src="@/assets/images/login/login-buttom.png" alt="插图" />
				</div>
			</div>
		</div>

		<!-- 右侧内容区域 -->
		<div class="login-right">
			<div class="form-container">
				<!-- 登录表单 -->
				<div v-if="activeTab === 'login'">
					<h2 class="welcome-title">欢迎登录</h2>

					<div class="tab-nav">
						<a-tabs v-model:activeKey="loginType">
							<a-tab-pane key="account" tab="账号密码登录"></a-tab-pane>
							<a-tab-pane key="mobile" tab="手机快速登录"></a-tab-pane>
							<a-tab-pane key="register" tab="注册账号"></a-tab-pane>
						</a-tabs>
					</div>

					<!-- 账号密码登录 -->
					<a-form v-if="loginType === 'account'" :model="accountForm" :rules="loginRules" class="login-form">
						<!-- 用户名输入 -->
						<a-form-item prop="username">
							<a-input v-model:value="accountForm.username" placeholder="账号" size="large">
								<template #prefix>
									<UserOutlined style="color: #bfbfbf" />
								</template>
							</a-input>
						</a-form-item>

						<!-- 密码输入 -->
						<a-form-item prop="password">
							<a-input-password v-model:value="accountForm.password" placeholder="密码" size="large" @keyup.enter="handleAccountLogin">
								<template #prefix>
									<LockOutlined style="color: #bfbfbf" />
								</template>
							</a-input-password>
						</a-form-item>

						<!-- 身份选择 -->
						<a-form-item>
							<div class="role-select">
								<span class="role-label">身份选择：</span>
								<a-radio-group v-model:value="accountForm.clientRoleType">
									<a-radio value="00000">设计师</a-radio>
									<a-radio value="00001">雇主</a-radio>
								</a-radio-group>
							</div>
						</a-form-item>

						<div class="remember-forgot">
							<a-checkbox v-model:checked="accountForm.rememberMe">记住密码</a-checkbox>
							<a class="forgot">忘记密码?</a>
						</div>

						<a-button type="primary" block size="large" class="submit-btn" :loading="loginLoading" @click="handleAccountLogin">
							<span v-if="!loginLoading">登录</span>
							<span v-else>登录中...</span>
						</a-button>

						<div class="register-link">
							<a @click="activeTab = 'register'">新用户注册</a>
						</div>
					</a-form>

					<!-- 手机快速登录 -->
					<a-form v-if="loginType === 'mobile'" :model="mobileLoginForm" class="login-form">
						<a-form-item>
							<a-input v-model:value="mobileLoginForm.mobile" placeholder="手机号码" size="large">
								<template #prefix>
									<MobileOutlined style="color: #bfbfbf" />
								</template>
							</a-input>
						</a-form-item>

						<a-form-item>
							<div class="code-input-group">
								<a-input v-model:value="mobileLoginForm.verificationCode" placeholder="输入短信验证码" size="large">
									<template #prefix>
										<SafetyOutlined style="color: #bfbfbf" />
									</template>
								</a-input>
								<a-button type="primary" class="send-code-btn">获取验证码</a-button>
							</div>
						</a-form-item>

						<a-button type="primary" block size="large" class="submit-btn">登录</a-button>
					</a-form>

					<!-- 其他登录方式 -->
					<div class="other-login">
						<div class="divider">其他方式登录</div>
						<div class="login-methods">
							<a class="method-item">
								<WechatOutlined />
								<span>微信登录</span>
							</a>
							<a class="method-item">
								<QqOutlined />
								<span>QQ登录</span>
							</a>
						</div>
					</div>
				</div>

				<!-- 注册表单 -->
				<div v-if="activeTab === 'register'">
					<div class="register-header">
						<h2 class="welcome-title">欢迎注册</h2>
						<div class="login-link-wrap">
							<span>已有账号：</span>
							<a class="login-link" @click="activeTab = 'login'">立即登录</a>
						</div>
					</div>

					<a-form :model="registerForm" class="register-form">
						<a-form-item>
							<a-input v-model:value="registerForm.mobile" placeholder="手机号码" size="large">
								<template #prefix>
									<MobileOutlined style="color: #bfbfbf" />
								</template>
							</a-input>
						</a-form-item>

						<div class="verify-btn-wrap">
							<a-button block size="large" class="verify-btn">
								<SafetyCertificateOutlined />
								点击按钮开始人机验证
							</a-button>
						</div>

						<a-form-item>
							<div class="code-input-group">
								<a-input v-model:value="registerForm.verificationCode" placeholder="输入短信验证码" size="large">
									<template #prefix>
										<SafetyOutlined style="color: #bfbfbf" />
									</template>
								</a-input>
								<a-button type="primary" class="send-code-btn">发送验证码</a-button>
							</div>
						</a-form-item>

						<a-form-item>
							<a-input-password v-model:value="registerForm.password" placeholder="输入密码" size="large">
								<template #prefix>
									<LockOutlined style="color: #bfbfbf" />
								</template>
							</a-input-password>
						</a-form-item>

						<a-form-item>
							<a-input-password v-model:value="registerForm.confirmPassword" placeholder="请确认密码" size="large">
								<template #prefix>
									<LockOutlined style="color: #bfbfbf" />
								</template>
							</a-input-password>
						</a-form-item>

						<a-form-item>
							<a-input v-model:value="registerForm.inviteCode" placeholder="注册邀请码（可不填）" size="large">
								<template #prefix>
									<UserOutlined style="color: #bfbfbf" />
								</template>
							</a-input>
						</a-form-item>

						<div class="agreement">
							<a-checkbox v-model:checked="registerForm.agreement">我已阅读并同意</a-checkbox>
							<a class="agreement-link">《特创易服务协议》</a>
						</div>

						<a-button type="primary" block size="large" class="submit-btn">注册</a-button>
					</a-form>

					<!-- 其他登录方式 -->
					<div class="other-login">
						<div class="divider">其他方式登录</div>
						<div class="login-methods">
							<a class="method-item">
								<WechatOutlined />
								<span>微信登录</span>
							</a>
							<a class="method-item">
								<QqOutlined />
								<span>QQ登录</span>
							</a>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- 底部内容 -->
		<div class="login-footer">
			<div class="footer-links">
				<a href="#">云设计</a>
				<a href="#">logo设计</a>
				<a href="#">服务产品</a>
				<a href="#">关于我们</a>
				<a href="#">合作伙伴</a>
				<a href="#">帮助中心</a>
				<a href="#">特创易公社</a>
				<a href="#">联系我们</a>
				<a href="#">法律声明</a>
				<a href="#">网站地图</a>
				<a href="#">意见反馈</a>
			</div>
			<div class="footer-info">
				<span>售前咨询热线：400 030 8292</span>
				<div class="qrcode">
					<img src="https://api.qrserver.com/v1/create-qr-code/?size=80x80&data=https://example.com" alt="二维码" />
					<span>微信商务号</span>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref, reactive, watch, onMounted } from 'vue';
import { message } from 'ant-design-vue';
import { useRouter } from 'vue-router';
import {
	UserOutlined,
	LockOutlined,
	MobileOutlined,
	SafetyOutlined,
	CheckCircleOutlined,
	WechatOutlined,
	QqOutlined,
	SafetyCertificateOutlined
} from '@ant-design/icons-vue';
import { useUserStore } from '@/store/user';
import { getRememberedLoginInfo, rememberLoginInfo } from '@/utils/auth';
import { LoginData } from '@/types/login';

// 路由
const router = useRouter();
// 用户状态管理
const userStore = useUserStore();

// 控制显示登录或注册
const activeTab = ref('login');
// 控制登录方式
const loginType = ref('account');
// 登录加载状态
const loginLoading = ref(false);

// 监听loginType变化，当选择"注册账号"时切换到注册页面
watch(loginType, newValue => {
	if (newValue === 'register') {
		activeTab.value = 'register';
		// 重置为账号密码登录，以便下次进入登录页时显示账号密码登录
		loginType.value = 'account';
	}
});

// 切换到注册页面
const switchToRegister = () => {
	activeTab.value = 'register';
	resetRegisterForm();
};

// 账号密码登录表单
const accountForm = reactive<LoginData>({
	tenantId: '000000',     // 添加租户ID
	username: '',
	password: '',
	clientId: 'e5cd7e4891bf95d1d19206ce24a7b32e',
	grantType: 'password',
	rememberMe: false,
	clientRoleType: '00000'  // 默认为设计师
});

// 手机快速登录表单
const mobileLoginForm = reactive({
	mobile: '',
	verificationCode: ''
});

// 注册表单
const registerForm = reactive({
	mobile: '',
	verificationCode: '',
	password: '',
	confirmPassword: '',
	inviteCode: '',
	agreement: false
});

// 登录验证规则
const loginRules: Record<string, any> = {
	username: [
		{ required: true, message: '请输入用户名', trigger: 'blur' }
	],
	password: [
		{ required: true, message: '请输入密码', trigger: 'blur' }
	]
};

// 账号密码登录处理函数
const handleAccountLogin = async () => {
	// 表单验证
	if (!accountForm.username) {
		message.error('请输入账号');
		return;
	}
	if (!accountForm.password) {
		message.error('请输入密码');
		return;
	}

	// 开始登录
	loginLoading.value = true;
	try {
		// 调用登录API
		await userStore.login(accountForm);
		
		// 处理记住密码
		if (accountForm.rememberMe) {
			rememberLoginInfo(
				accountForm.tenantId || '000000',
				accountForm.username || '',
				accountForm.password || '',
				true,
				accountForm.clientRoleType || '00000'
			);
		} else {
			rememberLoginInfo('000000', '', '', false, '00000');
		}
		
		// 获取用户信息
		await userStore.getInfo();
		
		message.success('登录成功');
		// 跳转到首页或目标页面
		const redirect = new URLSearchParams(window.location.search).get('redirect');
		router.push(redirect || '/');
	} catch (error: any) {
		console.error('登录失败:', error);
		message.error(error.message || '登录失败，请重试');
	} finally {
		loginLoading.value = false;
	}
};

// 重置注册表单方法
const resetRegisterForm = () => {
	registerForm.mobile = '';
	registerForm.verificationCode = '';
	registerForm.password = '';
	registerForm.confirmPassword = '';
	registerForm.inviteCode = '';
	registerForm.agreement = false;
};

// 监听activeTab变化，当切换到注册页面时重置表单
watch(activeTab, newValue => {
	if (newValue === 'register') {
		resetRegisterForm();
	}
});

// 初始化
onMounted(() => {
	// 读取已记住的账号信息
	const rememberedInfo = getRememberedLoginInfo();
	if (rememberedInfo.rememberMe) {
		accountForm.tenantId = rememberedInfo.tenantId; // 加载记住的租户ID
		accountForm.username = rememberedInfo.username;
		accountForm.password = rememberedInfo.password;
		accountForm.clientRoleType = rememberedInfo.clientRoleType; // 加载记住的身份类型
		accountForm.rememberMe = true;
	}
	
	// 添加点击事件监听器到注册标签
	const registerTab = document.querySelector('.ant-tabs-tab:nth-child(3)');
	if (registerTab) {
		registerTab.addEventListener('click', switchToRegister);
	}
});
</script>

<style lang="scss" scoped>
.login-container {
	position: relative;
	display: flex;
	min-height: 100vh;
	padding-bottom: 100px; // 为底部留出空间

	.login-left {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 50%;
		background: #1890ff;

		.left-content {
			width: 80%;
			max-width: 500px;
			padding: 20px;

			.logo-wrap {
				display: flex;
				gap: 10px;
				align-items: center;
				margin-bottom: 30px;

				.logo {
					width: 40px;
					height: 40px;
				}

				h2 {
					margin: 0;
					font-size: 22px;
					font-weight: normal;
					color: #ffffff;
				}
			}

			.info-list {
				margin-bottom: 30px;

				.info-item {
					display: flex;
					gap: 8px;
					align-items: center;
					margin-bottom: 12px;
					font-size: 16px;
					color: #ffffff;

					.anticon {
						font-size: 20px;
					}
				}
			}

			.illustration {
				display: flex;
				align-items: center;
				justify-content: center;

				img {
					max-width: 100%;
					max-height: 250px; // 限制图片高度
				}
			}
		}
	}

	.login-right {
		display: flex;
		flex: 1;
		align-items: center;
		justify-content: center;

		.form-container {
			width: 420px; // 增加宽度
			padding: 30px; // 增加内边距
			background: #ffffff;
			border-radius: 8px; // 增加圆角
			box-shadow: 0 4px 16px rgb(0 0 0 / 15%); // 增强阴影效果

			.welcome-title {
				margin-top: 8px; /* 添加顶部边距，使标题下移 */
				margin-bottom: 16px;
				font-size: 22px;
				font-weight: normal;
				line-height: 32px; /* 设置行高，与"已有账号"对齐 */
				color: #333333;
			}

			.login-link-wrap {
				margin-top: 8px; /* 添加顶部边距，保持与标题一致 */
				margin-bottom: 16px;
				font-size: 14px;
				line-height: 32px; /* 设置行高，与标题对齐 */
				text-align: right;

				.login-link {
					color: #1890ff;
					cursor: pointer;

					&:hover {
						text-decoration: underline;
					}
				}
			}

			.tab-nav {
				margin-bottom: 16px;

				:deep(.ant-tabs-nav) {
					margin-bottom: 16px;
				}

				:deep(.ant-tabs-tab) {
					padding: 8px 0;
					margin-right: 20px;
					font-size: 14px;
				}

				:deep(.ant-tabs-tab-active .ant-tabs-tab-btn) {
					font-weight: normal;
					color: #1890ff;
				}

				:deep(.ant-tabs-ink-bar) {
					background-color: #1890ff;
				}
			}

			.login-form,
			.register-form {
				.verify-btn-wrap {
					margin-bottom: 16px;

					.verify-btn {
						display: flex;
						gap: 8px;
						align-items: center;
						justify-content: center;
						height: 40px;
						font-size: 14px;
						color: #666666;
						background: #f7f7f7;
						border: 1px solid #e8e8e8;

						&:hover {
							color: #40a9ff;
							border-color: #40a9ff;
						}
					}
				}

				.code-input-group {
					display: flex;
					gap: 10px;

					.ant-input-affix-wrapper {
						flex: 1;
					}

					.send-code-btn {
						width: 100px;
						height: 40px;
						font-size: 13px;
					}
				}

				.remember-forgot {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin: 10px 0 16px;
					font-size: 13px;

					.forgot {
						color: #1890ff;
						cursor: pointer;
					}
				}

				.submit-btn {
					height: 40px;
					margin-bottom: 14px;
					font-size: 15px;
				}

				.register-link {
					margin: 14px 0 24px;
					text-align: center;

					a {
						font-size: 14px;
						color: #1890ff;
						cursor: pointer;
					}
				}

				.agreement {
					display: flex;
					gap: 4px;
					align-items: center;
					margin: 14px 0;
					font-size: 13px;

					.agreement-link {
						color: #1890ff;
						cursor: pointer;

						&:hover {
							text-decoration: underline;
						}
					}
				}

				.role-select {
					display: flex;
					align-items: center;
					margin-bottom: 16px;
					
					.role-label {
						margin-right: 12px;
						font-size: 14px;
						color: #666;
					}
				}
			}

			.other-login {
				.divider {
					position: relative;
					margin-bottom: 16px;
					font-size: 13px;
					color: #999999;
					text-align: center;

					&::before,
					&::after {
						position: absolute;
						top: 50%;
						width: 30%;
						height: 1px;
						content: '';
						background: #e8e8e8;
					}

					&::before {
						left: 0;
					}

					&::after {
						right: 0;
					}
				}

				.login-methods {
					display: flex;
					gap: 40px;
					justify-content: center;

					.method-item {
						display: flex;
						flex-direction: column;
						gap: 5px;
						align-items: center;
						cursor: pointer;

						.anticon {
							font-size: 22px;

							&.anticon-wechat {
								color: #07c160;
							}

							&.anticon-qq {
								color: #2a63f5;
							}
						}

						span {
							font-size: 12px;
							color: #666666;
						}
					}
				}
			}
		}
	}

	.login-footer {
		position: absolute;
		right: 0;
		bottom: 0;
		left: 0;
		padding: 12px 30px;
		background: #ffffff;
		border-top: 1px solid #e8e8e8;

		.footer-links {
			display: flex;
			flex-wrap: wrap;
			gap: 16px;
			justify-content: center;
			margin-bottom: 10px;

			a {
				font-size: 12px;
				color: #666666;
				text-decoration: none;

				&:hover {
					color: #1890ff;
				}
			}
		}

		.footer-info {
			display: flex;
			gap: 30px;
			align-items: center;
			justify-content: center;
			font-size: 12px;
			color: #666666;

			.qrcode {
				display: flex;
				flex-direction: column;
				gap: 4px;
				align-items: center;

				img {
					width: 50px;
					height: 50px;
					padding: 2px;
					border: 1px solid #e8e8e8;
					border-radius: 2px;
				}

				span {
					font-size: 12px;
					color: #666666;
				}
			}
		}
	}
}

:deep(.ant-input-affix-wrapper) {
	height: 40px;

	.ant-input {
		font-size: 14px;
	}
}

:deep(.ant-form-item) {
	margin-bottom: 14px;
}

/* 添加注册页面头部样式 */
.register-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 20px;

	.welcome-title {
		margin: 0;
		font-size: 20px;
		font-weight: normal;
		color: #333333;
	}

	.login-link-wrap {
		font-size: 14px;
		color: #666666;

		.login-link {
			color: #1890ff;
			cursor: pointer;

			&:hover {
				text-decoration: underline;
			}
		}
	}
}

/* 移除原有的样式，避免冲突 */
.form-container {
	.welcome-title {
		margin-top: 0;
	}

	.login-link-wrap {
		position: static;
		margin-top: 0;
		text-align: right;
	}
}
</style>
